<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>登录测试</title>
</head>
<style type="text/css">
	.login-box {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-box {
		width: 100%;
		text-align: right;
	}

	.password {
		margin-top: 10px;
	}

	.btn {
		margin-top: 10px;
	}
</style>
<body>
<div class="login-box">
	<div>
		<h1>登录</h1>
		<div class="username">
			<span>账号：</span><input type="text" name="username" id="username" />
		</div>
		<div class="password">
			<span>密码：</span><input type="password" name="password" id="password" />
		</div>
		<div class="btn-box">
			<button class="btn" onclick="submit()">提交</button>
		</div>
	</div>
</div>
</body>
<script>
	function submit() {
		var username = document.getElementById('username').value;
		var password = document.getElementById('password').value;
		var nonceId = getUrlParameter("nonceId");
		// var nonceId = generateUUID();
		localStorage.setItem("nonceId", nonceId);
		let xhr = new XMLHttpRequest();
		xhr.open('POST', 'http://micro-service-auth-server:9000/login');
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.setRequestHeader('nonceId', nonceId);
		xhr.send('username=' + username + '&password=' + password);
		xhr.onreadystatechange = function() {
			console.log(xhr.responseText)
			if (xhr.readyState === 4 && xhr.status === 200) {
				window.location.href = 'http://micro-service-gateway/micro-service-main';
			}
		}
	}
	function getUrlParameter(paramName) {
		let urlStr = window.location.search.split('?')[1]
		const params = new URLSearchParams(urlStr);
		return params.get(paramName);
	}
	//function generateUUID() {
	//	var d = new Date().getTime(); //Timestamp
	//	var d2 = (performance && performance.now && (performance.now()*1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
	//	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
	//		var r = Math.random() * 16; //random number between 0 and 16
	//		if(d > 0) { //Use timestamp until depleted
	//			r = (d + r)%16 | 0;
	//			d = Math.floor(d/16);
	//		} else { //Use microseconds since page-load if supported
	//			r = (d2 + r)%16 | 0;
	//			d2 = Math.floor(d2/16);
	//		}
	//		return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
	//	});
	//}
</script>
</html>